<template>
<view>
<image class="succes_tp" mode="widthFix" src="http://imgbdb3.bendibao.com/whbdb/20215/11/20210511101648_59339.jpeg"></image>
<view class="succes_h2">恭喜你，符合办理条件</view>
<view class="desc" :v-if="desc">
  {{desc}}
</view>
<block v-if="url">
  <view class="succes_p anniu_x60">请点击下方办理指南了解详情</view>
  <view class="article">
    <navigator :url="'/pages/webview/webview?path=' + url">办理指南</navigator>
  </view>
  <view v-if="toMiniProgram" @tap="toMiniProgram" class="anniu_2">我要代办</view>
  <view class="index">
    <navigator url="/pages/index/index" open-type="reLaunch">返回首页</navigator>
  </view>
</block>
<view class="share">
  <view class="head">
    <view class="line"></view>
    <view class="text">分享给朋友测试</view>
    <view class="line"></view>
  </view>
  <button open-type="share" hover-class="btn">
    <image src="/static/images/share/group.png" class="wechat"></image>
  </button>
</view>
<!-- <collection collectionData="{{collectionData}}" scroll="{{scroll}}" onopenCollection="openCollection" oncloseCollection="closeCollection"></collection> -->
</view>
</template>

<script>
const app = getApp();
const util = require("../../../../../utils/util.js");
var appId;
var path;
var model_id;
let toggleCollection = true;

export default {
  data() {
    return {
      toMiniProgram: false,
      scroll: false,
      desc: "",
      url: "",
      title: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    toggleCollection = true;

    if (options.url != undefined) {
      this.setData({
        url: options.url
      });
    }

    if (options.title != undefined) {
      this.setData({
        title: options.title
      });
    }

    if (options.desc) {
      this.setData({
        desc: options.desc
      });
    }

    util.getUrl(app.globalData.url).then(res => {
      model_id = options.model_id;
      let $getMiniProgramInfo = {
        action: "model",
        model_id
      };
      uni.request({
        url: app.globalData.api,
        data: $getMiniProgramInfo,
        method: "GET",
        header: {
          "content-type": "application/json"
        },
        success: res => {
          let miniProgramInfo = JSON.parse(JSON.stringify(res.data));

          if (miniProgramInfo.wx_appid && miniProgramInfo.wx_path) {
            this.setData({
              toMiniProgram: true
            });
            appId = miniProgramInfo.wx_appid;
            path = miniProgramInfo.wx_path;
          }
        }
      });
    });
  },
  onShareAppMessage: function () {
    return {
      path: `/pages/tools/banshi/problem/item/item?model_id=${model_id}`,
      title: app.globalData.shareTitle ? app.globalData.shareTitle : "本地宝",
      imageUrl: app.globalData.shareImage ? app.globalData.shareImage : "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: app.globalData.shareTitle ? app.globalData.shareTitle : "本地宝",
      imageUrl: app.globalData.shareImage ? app.globalData.shareImage : "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg",
      query: `/pages/tools/banshi/problem/item/item?model_id=${model_id}`
    };
  },
  methods: {
    toMiniProgram() {
      uni.navigateToMiniProgram({
        appId,
        path
      });
    },

    onPageScroll() {
      if (toggleCollection) {
        this.setData({
          scroll: true
        });
        toggleCollection = false;
      }
    },

    closeCollection() {
      toggleCollection = false;
    },

    openCollection() {
      toggleCollection = true;
    }

  }
};
</script>
<style>
/* pages/index/success.wxss */

.succes_p {
    box-shadow: none;
    text-align: center;
}

.succes_h2 {
    margin-bottom: 14rpx;
}

.succes_tp {
    width: 380rpx;
    height: 280rpx;
    margin: 0 auto;
    display: block;
    margin-top: 100rpx;
}

.share {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 146rpx;
}

.line {
    width: 52rpx;
    border-bottom: 2rpx solid #D5D5D5;
}

.text {
    margin: 0 18rpx;
}

.wechat {
    height: 97rpx;
    width: 97rpx;
    margin-top: 30rpx;
}

.index {
    width: 86%;
    height: 92rpx;
    margin: 0 auto;
    margin-top: 40rpx;
    line-height: 92rpx;
    text-align: center;
    color: #f60;
    border-radius: 46rpx;
    border: 2rpx solid #f60;
    font-size: 36rpx;
}

.article {
    width: 86%;
    height: 92rpx;
    background: linear-gradient(to right, #FFAA00, #FF6600);
    margin: 0 auto;
    line-height: 92rpx;
    text-align: center;
    color: #fff;
    border-radius: 46rpx;
    font-size: 36rpx;
    /* border: 1rpx solid #c6c6c6; */
    box-sizing: border-box;
}

.desc {
    font-size: 28rpx;
    text-align: center;
    color: #BCBCBC;
}


/**succes css 开始**/


/* .succes_tp{ width: 160rpx; margin: 0 auto; display: block; margin-top: 100rpx;} */

.succes_h2 {
    text-align: center;
    font-size: 36rpx;
    margin: 60rpx 0;
    color: #000
}

.succes_p {
    font-size: 32rpx;
    margin-top: 20rpx;
    color: #666;
    padding: 28rpx;
    border-radius: 16rpx;
}

.anniu_1 {
    width: 86%;
    height: 92rpx;
    margin: 0 auto;
    line-height: 92rpx;
    text-align: center;
    color: #f60;
    border-radius: 46rpx;
    border: 2rpx solid #f60;
    font-size: 36rpx;
}

.anniu_x60 {
    margin-bottom: 60rpx;
}

.anniu_2 {
    width: 86%;
    height: 92rpx;
    background: linear-gradient(to right, #FFAA00, #FF6600);
    margin: 0 auto;
    line-height: 92rpx;
    text-align: center;
    color: #fff;
    border-radius: 46rpx;
    font-size: 36rpx;
    margin-top: 40rpx;
    border: 1rpx solid #c6c6c6;
    box-sizing: border-box;
}

button {
    background-color: transparent
}

button::after {
    border: 0
}
</style>